<template>
  <div class="setting-info">
    <div class="custom-title setting-info-title">我的收藏</div>
    <div class="setting-info-box" :loading="state.loading">
      <template v-if="state.dataList.length">
        <goods v-for="(goods, index) in state.dataList" :key="goods.id" :item="goods"
          :type="goods.actionType === '1' ? 'goods' : 'preSale'" :index="index" @reload="getList" view>
        </goods>
      </template>
      <el-empty style="width: 100%;" v-else-if="!state.dataList.length && !state.loading" description="暂无数据" />
    </div>
    <el-pagination v-show="state.dataList.length" class="pagination" v-model:current-page="queryData.pageNum"
      :page-size="queryData.pageSize" layout="total, prev, pager, next" :total="state.total"
      @current-change="handleCurrentChange" />
  </div>
</template>

<script setup name="collection">
import { appPersonalMyLikeListPost } from '@/api/account'
const queryData = reactive({
  type: '1',
  pageNum: 1,
  pageSize: 12
})
const state = reactive({
  dataList: [],
  total: 0,
  loading: false,
  noMore: false
})
const getList = async () => {
  state.loading = true
  const res = await appPersonalMyLikeListPost({ body: queryData })
  if (res.code === 0) {
    console.log(res)
    state.dataList = res.data.records
    state.total = parseInt(res.data.total)
  }
  state.loading = false
}
const handleCurrentChange = (val) => {
  queryData.pageNum = val
  getList()
}

getList().catch((e) => {
  console.log(e)
})
</script>

<style lang="scss" scoped>
.setting-info {
  width: 100%;

  &-title {
    font-size: var(--jbc-font-size-extra-large);
  }

  .setting-info-box {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    .goods{
      margin-left: 5px;
      &:nth-child(4n+1) {
        margin-left: 0;
      }
    }
  }

  .pagination {
    margin-top: 20px;
    justify-content: center;
  }
}
</style>